<script lang="ts" setup>
import { ref, reactive,shallowReactive,markRaw, defineComponent, getCurrentInstance, onMounted } from 'vue'
import { Handle, Position, useNode } from '@vue-flow/core'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import StartInputModule from '../start-input-module.vue'
import type { NodeProps } from '@vue-flow/core'
import { LLMNodeData, LLMNodeEvents } from './index'
import type { Input as InputType } from '../start-input-module.vue'
import commonBasicFormVue from '@/components/vue-flow/common-basic-form.vue'

// import {template,add} from './data/start.json'
import FormItem from '@/components/vue-flow/nodes/formItem.vue'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Button } from '@/components/ui/button'
// import {useTextStore} from '@/pina/index'
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
const data = ref<InputType[]>([])

const node = useNode()
const textStore = useTextStore()
const DLSData = textStore.template
// template.formData.formItems = shallowReactive(template.formData.formItems)
// let template=DLSData.template


</script>

<template>
  <div class="rounded-sm border border-gray-200 bg-white p-3 shadow-md">
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img src="~@/assets/images/icon-Text.png" class="h-4 w-4" alt="Start icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-sm text-gray-500">文本处理</p>
          </div>
        </div>
      </div>
      <span class="text-sm text-gray-500">用于处理多个字符串类型变量的格式</span>
      <div class="rounded-md bg-muted p-4">
        <common-basic-form-vue :DLSData="DLSData" @onClickAddBtn="handleClickAddBtn">
        </common-basic-form-vue>
       </div>
    </div>
  </div>
</template>
